/*
 *@Author: 张楚
 *@Date: 2022-01-17 16:25:16
 *@Description: 滚动滑动
*/

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class GridViewPage extends StatefulWidget {
  const GridViewPage({Key key}) : super(key: key);
  @override
  _GridViewPageState createState() => _GridViewPageState();
}

class _GridViewPageState extends State<GridViewPage> {
  int pageIndex = 0;
  List a = [
    '1爱上',
    '啊2',
    '1',
    '2是',
    '2',
    '1',
    '2的',
    '2',
    '1',
    '2的',
    '2',
    '1',
    '2'
  ];

  @override
  Widget build(BuildContext context) {
//CustomWidgets.appBarWhite(context, '会议详情'),
    double length = a.length / 8;

    return Scaffold(
      appBar: AppBar(
        title: Text('滑动滚动'),
      ),
      body: Container(
        height: 200,
        margin: EdgeInsets.only(top: 10, bottom: 10, right: 15, left: 15),
        decoration: BoxDecoration(border: Border.all()),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            //主体部分
            Expanded(
                child: PageView.builder(
                    physics: BouncingScrollPhysics(),
                    itemCount: length.ceil(),
                    onPageChanged: (index) {
                      // print(value);
                      setState(() {
                        pageIndex = index;
                      });
                    },
                    itemBuilder: (context, index) => pageItem(index))),
            //小点
            SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Row(
                children: List.generate(length.ceil(), (index) {
                  Color botColor;
                  if (pageIndex == index) {
                    botColor = Colors.blue;
                  } else {
                    botColor = Colors.grey;
                  }
                  return CircleAvatar(
                    radius: 4,
                    backgroundColor: botColor,
                  );
                }),
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget pageItem(int index) {
    List pageItemList = [];
    int start = index * 8;
    int end = start + 8;
    if (end > a.length) {
      end = a.length;
    }
    pageItemList.addAll(a.getRange(start, end));
    return GridView.builder(
      gridDelegate:
          SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
      itemCount: pageItemList.length,
      padding: EdgeInsets.all(10),
      physics: NeverScrollableScrollPhysics(),
      shrinkWrap: true,
      itemBuilder: (context, index) {
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: GestureDetector(
            onTap: () => print('点击第$index个'),
            child: Column(
              children: [
                ClipOval(
                  child: Container(
                    width: 50,
                    height: 50,
                    alignment: Alignment.center,
                    child: Text('${a[index].toString()}'),
                    decoration: BoxDecoration(color: Colors.red),
                  ),
                ),
                Text('$index')
              ],
            ),
          ),
        );
      },
    );
  }
}

class Appitem {
  String title;
  Icon icon;
}
